<script>
  import Student from  "./components/Student"
  import School from "./components/School"
  export default {
    name: "App" ,
    data(){
      return{
        msg:'欢迎学习前端技术'
      }
    },
    components: {
      Student,
      School,

    },
    methods:{

      changeDOM(){
        this.$refs.h1_msg.innerHTML='我被修改啦'
      },
      getStudentName(name){
        console.log('收到学生组件传过来的学生姓名',name)
      },
      getSchoolName(name){
        console.log('收到学校组件传过来的学校名称',name)
      }


    },
    //生命周期钩子绑定自定义事件
    mounted() {
      this.$refs.student.$on('getStudentName',this.getStudentName)
      this.$refs.school.$on('getSchoolName',this.getSchoolName)
    },

  }
</script>

<template>
  <div>
    <h1 ref="h1_msg" v-text="msg"></h1>
    <button @click="changeDOM">点击修改msg</button>
    <Student ref="student"></Student>
    <School ref="school" position="广东潮州" :score='521'>
    </School>
  </div>
</template>
